<template>
    <div>
      <!-- 搜索表单 -->
      <div style="margin-bottom:20px;">
        <el-input style="width:240px" placeholder="请输入类型名称" v-model="type"></el-input>
        <el-button style="margin-left:5px;" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
        <el-button style="margin-left:5px;" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button style="margin-left:5px;" type="success" @click="addKind"><i class="el-icon-plus"></i>添加类型</el-button>
      </div>
  
      <!-- 为网格加网线 -->
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="编号" v-show="false"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
  
        <el-table-column label="操作">
          <template v-slot="scope">
            <!-- scope.row就是当前行数据 -->
            <el-button type="primary" @click="editKind(scope.row.id)"><i class="el-icon-edit">编辑</i></el-button>
            <el-popconfirm
                title="您确定删除这行数据吗吗？"
                @confirm="delKind(scope.row.id)"
                style="margin-left:5px"
              >
                <el-button type="danger" slot="reference"><i class="el-icon-delete">删除</i></el-button>
              </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  
      <!-- 新增弹窗 -->
      <Dialog
          :title="dialog.title"
          :visible="dialog.visible"
          :width="dialog.width"
          :height="dialog.height"
          @onClose="onClose"
      >
          <div slot="content">
              <AddKindList
              @onClose="onClose"
              @onConfirm="onConfirm"
              @load="load">
              </AddKindList>
          </div>
      </Dialog>
  
      <!-- 编辑弹窗 -->
      <Dialog
          :title="dialog.title"
          :visible="dialog.editVisible"
          :width="dialog.width"
          :height="dialog.height"
          @onClose="onClose"
          @onCloseEdit="onCloseEdit"
      >
          <div slot="content">
              <EditKindList
              @onClose="onCloseEdit"
              @onConfirm="onConfirmEdit"
              :id="dialog.id"
              :ts="dialog.ts"
              @load="load">
              </EditKindList>
          </div>
      </Dialog>
    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  import Dialog from '@/components/dialog/Dialog.vue'
  import AddKindList from '@/components/dialog/AddKindList.vue'
  import EditKindList from '@/components/dialog/EditKindList.vue'
  
  export default {
    name: 'Kind',
    components:{
      AddKindList,
      Dialog,
      EditKindList
    },
    data(){
      return {
        // 弹框属性
        dialog:{
          ts:'',
          id:'',
          title:'',
          visible:false,
          editVisible:false,
          width:630,
          height:200
        },
        tableData:[],
        total:0,
        pageNo:1,
        pageSize:5,
        type:''
      }
    },
    mounted(){
      this.load()
    },
    methods:{
      load(){
        request.get('/api/page/workbench/kind/search.do',{
          params:{
            type:this.type,
            pageNo:this.pageNo,
            pageSize:this.pageSize
          }
        }).then(res=>{
          this.tableData=res.kinds
          this.total=res.total
        })
      },
      reset(){
        this.pageNo=1
        this.pageSize=this.pageSize
        this.type=''
        this.load()
      },
      handleSizeChange(pageSize){
        // 改变页面大小按钮触发分页 pageSize是页面大小
        // console.log(pageSize)
        this.pageSize=pageSize
        this.load()
      },
      handleCurrentChange(pageNo){
        // 改变当前页数按钮触发分页 pageNo是当前页数
        this.pageNo=pageNo
        this.load()
      },
      // 新增按钮
      addKind(){
          // 设置弹框属性
          this.dialog.title='新增种类'
          // 弹出对话框
          this.dialog.visible=true
      },
      // 编辑按钮
      editKind(id){
          // 设置弹框属性
          this.dialog.title='编辑种类'
          this.dialog.id=id
          this.dialog.ts=new Date().valueOf() // 获取时间戳
          // 弹出对话框
          this.dialog.editVisible=true
          this.load()
      },
      // 弹框关闭
      onClose(){
          this.dialog.visible=false
      },
      // 弹框确定
      onConfirm(){
          this.dialog.visible=false
      },
      // 编辑弹框关闭
      onCloseEdit(){
          this.dialog.editVisible=false
      },
      // 编辑弹框确定
      onConfirmEdit(){
          this.dialog.editVisible=false
      },
      // 确认删除
      delKind(id){
        request.post('/api/page/workbench/kind/del.do',{
              id:id
          }).then(res=>{
              if(res.code==="1"){
                  this.$notify.success('删除成功')
                  this.load()
              }else{
                  this.$notify.error(res.message)
              }
          })
      }
    }
  }
  </script>
  
  <style>
  
  </style>